<template>
  <div>
    <div class="userinfo_content">
    <img :src="data.avatar" class="userinfo_header_icon" />
    <div class="userinfo_info">
      <p class="p_Name">{{ data.nickname }}<img :src="data.vipicon" /></p>
      <p class="p_UID">UID:{{ data.uid }}</p>
    </div>
    <div class="islink"><van-cell is-link to="" /></div>
  </div>

  <van-cell icon="gem-o" title="充值钻石" is-link to="" />

  <van-cell icon="balance-o" title="我的钱包" value="充值" is-link to="" />

  <div class="number">
    <div class="balance">
      <p>0.00</p>
      <p>余额</p>
    </div>
    <div class="contribute">
      <p>0</p>
      <p>贡献值</p>
    </div>
  </div>

  <div class="order">
    <van-cell icon="cart-o" title="我的订单" is-link to="" />
  </div>

  <div class="setup"><van-cell icon="setting-o" title="设置中心" is-link to="" />
</div>
  <div class="application"><van-cell icon="bag-o" title="申请入住" is-link to="" /></div>

  <div class="contanct"><van-cell icon="service-o" title="联系客服" is-link to="" /></div>
  <van-cell title="注销账号" is-link to="/login" style="color:red;" @click="handelstroage"/>
  <nav-btn></nav-btn>
  </div>
</template>
<script>
// import getjson from "../directive/getjson";

// import { Cell } from 'vant'
import navBtn from '@/components/headers/navBottom'
export default {
  methods: {
    handelstroage () {
      localStorage.removeItem('username')
    }
  },
  components: {
    navBtn
  },

  data () {
    return {
      data: []
    }
  },

  mounted () {
    this.data = {
      uid: 3932540,
      vipuserid: 0,
      viplevel: 0,
      nickname: 'twm_7700a6c33',
      source: '',
      regtype: 1,
      createtime: 1627458156,
      avatar: 'https://res.tuwan.com/templet/play/images/noavatar_middle.gif',
      isteacher: 0,
      online: 0,
      onlinetime: 0,
      IDCard: '',
      IDcard_arcrank: -1,
      playvip: 0,
      playhonor: 0,
      cid: '',
      video_thumbnail: null,
      im_online: 0,
      im_web_online: 0,
      im_ios_online: 0,
      im_aos_online: 0,
      signtime: 0,
      signnum: 0,
      closesign: null,
      desc: null,
      hobby: 0,
      hobbysex: -1,
      platform: 0,
      usource: '',
      ctime: 1627459815,
      utime: 1627459815,
      update_time: '2021-07-28 16:42:34',
      lowerplay: 1,
      lowerplayhonor: 10000,
      vipicon: 'https://res.tuwan.com/templet/play/images/app/0.png',
      neworder: 0,
      person: 1,
      coupon: {
        error_code: 0,
        once: 0,
        couponinfo: {
          id: 4,
          gameid: '0',
          title: '5\u5143\u4f18\u60e0\u5238',
          desc: '5\u5143\u4f18\u60e0\u5238',
          price: 5,
          use_price: 35,
          expire_day: 5,
          icon: '',
          state: 0,
          ctime: 1522223468
        },
        count: 0
      },
      invite_type: 2,
      invite_img: '',
      invite_url: '',
      manageurl: '',
      diamond: 0,
      username: 'twm_7700a6c33',
      currency: 0,
      money: 0,
      cert_name: '',
      cert_no: '',
      bind_msg: '',
      userGrade: 'https://y.tuwan.com/levelm?ver=1',
      captain_rank_list: 'https://y.tuwan.com/top',
      support_proxy_charge: 0,
      error: 0
    }
  }
}
</script>
<style lang="scss" scoped>
.userinfo_content {
  position: relative;
  background: #fff;
  line-height: 0;
  float: left;
  width: 100%;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  .userinfo_header_icon {
    width: 3.5rem;
    border-radius: 50%;
    border: solid 2px #ebebeb;
    float: left;
    margin: 10px;
  }
  .userinfo_info {
    line-height: 0.3rem;
    float: left;
    padding: 6px;
    width: 50%;
    .p_Name {
      color: #333;
      font-size: 1rem;
      img {
        width: 2rem;
        display: inline-block;
        margin-left: 8px;
      }
    }
    .p_UID {
      color: #858585;
      font-size: 0.85rem;
      font-weight: 200;
      line-height: 0.6rem;
      position: relative;
    }
  }
  .islink {
    float: right;
    margin-right: 0.5rem;
    margin-top: 1rem;
  }
}
.van-cell {
  margin-bottom: 0.05rem;
}
.number {
  padding: 9px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  background: #fff;
  margin-bottom: 0.6rem;
   color: #858585;
  .balance {
    border-right: solid 1px #efefef;
    width: 50%;
  }
  .contribute {
    width: 50%;
    color: #858585;
  }
}
.order{
  margin-bottom: .6rem;
}
.setup{
  margin-bottom: .6rem;
}
.application{
  margin-bottom: .6rem;
}
.contanct{
  margin-bottom: .6rem;
}
</style>
